<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>hour</title>
  <script type="text/javascript" src="/js/echarts.min.js"></script>
  <script type="text/javascript" src="/js/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="main" style="width: auto;height: 800px">

</div>

<script>
  $(function () {
    var chartDom = document.getElementById('main');
    var myChart = echarts.init(chartDom);

    $.getJSON("/time/hour",function (values){
      var option;
      var hourdata = [];
      var PM2_5 = [];
      var PM10 = [];
      var SO2 = [];
      var NO2 = [];
      var O3 = [];
      var CO = [];

      for(var i = 0;i < 24;i++){
        hourdata.push(i+":00")
      }
      for(var i = 0;i < values.length; i++){
        if(values[i]["type"] == "PM2.5")
          PM2_5.push(values[i]["北京"])
        else if(values[i]["type"] == "PM10")
          PM10.push(values[i]["北京"])
        else if(values[i]["type"] == "SO2")
          SO2.push(values[i]["北京"])
        else if(values[i]["type"] == "NO2")
          NO2.push(values[i]["北京"])
        else if(values[i]["type"] == "O3")
          O3.push(values[i]["北京"])
        else if(values[i]["type"] == "CO")
          CO.push(values[i]["北京"])
      }

      console.log(PM10)

      option = {
        title: {
          text: '污染源随时间的变化'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['PM2.5', 'PM10', 'SO2', 'NO2', 'O3','CO']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: hourdata
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: 'PM2.5',
            type: 'line',
            data: PM2_5
          },
          {
            name: 'PM10',
            type: 'line',
            data: PM10
          },
          {
            name: 'SO2',
            type: 'line',
            data: SO2
          },
          {
            name: 'NO2',
            type: 'line',
            data: NO2
          },
          {
            name: 'O3',
            type: 'line',
            data: O3
          },
          {
            name: 'CO',
            type: 'line',
            data: CO
          }
        ]
      };

      option && myChart.setOption(option);
    })
  })
</script>
</body>
</html>